<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
    <head>
        <title>ClickClick Examples</title>
        <link rel="stylesheet" href="${context}/assets/css/screen.css" type="text/css" media="screen, projection">
        <link rel="stylesheet" href="${context}/assets/css/print.css" type="text/css" media="print">
        <!--[if IE]><link rel="stylesheet" href="${context}/css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
        <link rel="stylesheet" type="text/css" href="${context}/assets/css/syntax-highlighter.css"/>
        <script type="text/javascript" src="${context}/assets/js/syntax-highlighter.js"></script>
        ${cssImports}
        <style type="text/css">
            #breadcrumb {
                background-color: #FF9933;
                border-bottom: 1px solid #000080;
                color: #0A0A85;
                padding: 2px;
                padding-left: 10px;
                margin: 5px;
            }
            #breadcrumb a {
                color: #0A0A85;
            }
            body {
                margin-top: 0;
                background: #D4D4D4 url(${context}/assets/images/background.gif) repeat-x;
             }
            .container {
                background-color: white;
                border-left: 1px solid gray;
                border-right: 1px solid gray;
                border-bottom: 1px solid gray;
            }
            .title {
                margin-top: 5px;
            }
            #left-sidebar {
                background-color: white;
                margin-left: 5px;
            }
            #left-sidebar td {
                padding: 0;
            }
            #content {
                margin-left: -10px;
            }
            #header {
                background: url(${context}/assets/images/header.gif);
                background-color: #000080;
                height: 109px;
                position: relative;
            }

            #link, #link a {
                color: white;
                right: 5px;
                bottom: 5px;
                position: absolute;
            }

            #footer {
                margin-top: 5px;
            }
        </style>
        <link rel="shortcut icon" href="$context/favicon.ico" type="image/ico"/>
    </head>
    <body>
        <div class="container">
            <div id="header" class="span-24">
                <span id="link">
                    <a target="_blank" href="http://code.google.com/p/clickclick/">ClickClick</a>
                </span>
            </div>
            <div id="navbar" class="span-24">
                ${breadcrumb}
            </div>
            <div id="left-sidebar" class="span-5">
                ${rootMenu}
            </div>
            <div id="content" class="span-19 last">
                #parse(${path})
            </div>
            <div id="footer" class="span-24">
                
            </div>
        </div>
        ${jsImports}
        <script type="text/javascript">prettyPrint();</script>
    </body>
</html>